<template>
  <div class="legends">
    <ul>
      <li v-for="legend in legendList" :key="legend.id">
        <LegendCard :name="legend.legendName" :imgUrl="legend.imgUrl" />
      </li>
    </ul>
  </div>
</template>

<script>
import LegendCard from '@/components/LegendCard.vue'

export default {
  name: 'LegendsPage',
  components: { LegendCard },
  comments: {
    LegendCard
  },
  data() {
    return {
      legendList: [
        {
          id: 1,
          imgUrl: require('@/assets/正义巨像.webp'),
          legendName: '正义巨像'
        },
        {
          id: 2,
          imgUrl: require('@/assets/卡牌大师.webp'),
          legendName: '卡牌大师'
        },
        {
          id: 3,
          imgUrl: require('@/assets/狂战士.webp'),
          legendName: '狂战士'
        },
        {
          id: 4,
          imgUrl: require('@/assets/黑暗之女.webp'),
          legendName: '黑暗之女'
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.legends {
  margin-top: 20px;

  ul {
    display: flex;
    justify-content: flex-start;
    // 多行时主轴排列方式
    align-content: center;
    flex-wrap: wrap;
  }
}
</style>
